<template>
	<div class="nav">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<el-form :model="navForm" :rules="rules" ref="navForm" label-width="200px">
			<el-form-item label="导航名称" prop="nav.name" style="width: 600px;">
				<el-input v-model="navForm.nav.name" placeholder="导航名称"></el-input>
			</el-form-item>
			<el-form-item label="Icon图标" prop="nav.icon" style="width: 378px;">
				<el-input v-model="navForm.nav.icon" placeholder="Icon"></el-input>
			</el-form-item>
			<el-form-item label="上级导航" prop="nav.parentid">
				<el-select v-model="checkParentId" placeholder="请选择上级导航">
					<el-option label="顶级导航" value="0"></el-option>
					<el-option v-for="(item, index) in navList" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="预览图" prop="nav.preview" style="width: 420px;">
				<!-- <upload :domain="this.$domain.cms" :limit="3" :fileList="navForm.nav.preview" :maxSize="20" 
				:appid="$route.query.appid" 
				:field="'preview'" 
				@insertPic="insertPic" 
				@delPic="delPic">
				</upload> -->
				<upload-oss 
				:stsdomain="this.$domain.ac" 
				:ossdomain="this.$ossdomain" 
				:appid="$route.query.appid" 
				:limit="5" 
				:fileList="navForm.nav.preview" 
				:maxSize="20" 
				@insertFile="insertFile"
				@delFile="delFile">
				</upload-oss>
			</el-form-item>
			<el-form-item label="是否外链" prop="nav.outside">
				<el-switch v-model="navForm.nav.outside" @change="chooseOutside"></el-switch>
			</el-form-item>
			<el-form-item label="指定栏目" prop="nav.catid" v-if="!navForm.nav.outside">
				<el-select v-model="checkCat" filterable placeholder="请选择栏目" @change="chooseCategory" ref="category">
					<el-option v-for="(item, index) in categoryList" 
					:key="index" 
					:label="item.name" 
					:value="item.catid"
					:data-alias="item.alias">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="链接地址" prop="nav.url" style="width: 600px;">
				<el-input v-model="navForm.nav.url" placeholder="链接地址" :disabled="!navForm.nav.outside"></el-input>
				<p class="help" v-if="!navForm.nav.outside">请选择指定栏目，系统自动生成链接</p>
			</el-form-item>
			<el-form-item label="是否子路由" prop="nav.child_route" v-if="!navForm.nav.outside">
				<el-switch v-model="navForm.nav.child_route"></el-switch>
			</el-form-item>
			<el-form-item label="VUE路由" v-if="!navForm.nav.outside" style="width: 1200px;">
				<el-col :span="7">
					<el-form-item prop="vueRouter.path" style="margin-bottom: 0px">
						<el-input v-model="navForm.vueRouter.path" placeholder="Path" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="7">
					<el-form-item prop="vueRouter.name" style="margin-bottom: 0px">
						<el-input v-model="navForm.vueRouter.name" placeholder="Name" :disabled="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="8">
					<el-form-item prop="vueRouter.component" style="margin-bottom: 0px">
						<el-input v-model="navForm.vueRouter.component" placeholder="Component" @input="inputComponent"></el-input>
					</el-form-item>
				</el-col>
				<p class="help">仅对VUE开发的客户端有效</p>
			</el-form-item>
			<el-form-item label="打开方式" prop="nav.url_target" style="width: 600px;">
				<el-select v-model="navForm.nav.url_target" placeholder="请选择打开方式">
					<el-option label="本窗口" :value="'1'"></el-option>
					<el-option label="新窗口" :value="'2'"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="参数" prop="nav.args" style="width: 600px;">
				<el-button plain @click="addArgs">增加参数</el-button>
				<div v-for="(item, index) in navForm.nav.args" :key="index" class="mtop5">
					<el-input placeholder="参数" v-model="navForm.nav.args[index]" style="width: 333px;">
					</el-input>
					<el-button type="danger" plain @click="delArgs(index)">删除</el-button>
				</div>

			</el-form-item>
			<el-form-item label="是否显示" prop="nav.display">
				<el-switch v-model="navForm.nav.display"></el-switch>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('navForm')" :disabled='navForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='navForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('navForm')" v-if='navForm.nav.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import UploadOss from "pc/common/UploadOss"
import {changeToBool, changeUploadFormatBack, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*当前语言*/
			currlang: '',
			/*头部数据*/
			header: {
				title: '添加导航',
				reload: false,
				buttons: [
					{
						title: '导航列表',
						type: 'primary',
						pathName: 'pc/cms/instance/nav/NavList',
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			navList: [],
			categoryList: [],
			/*字段数据*/
			navForm: {
				submitLock: false,
				nav: {
					id: 0,
					name: '',
					icon: '',
					parentid: '',
					preview: [],
					outside: false,
					catid: '',
					url_target: '2',
					url: '',
					args: [],
					child_route: 1,
					display: true,
				},
				vueRouter: {
					path: '',
					name: '',
					component: '',
				}
			},
			rules: {
				nav: {
					name: [
						{ required: true, message: '请输入导航名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					/*注释原因： 填写主导航，或者底部导航的时候，不需要指明地址*/
					// url: [
					// 	{ required: true, message: '请输入链接地址', trigger: 'blur' },
					// 	{ min: 2, max: 512, message: '长度在 2 到 512 个字符', trigger: 'blur' }
					// ],
				}
			}
		};
	},
	components: {
		ListTitle,
		UploadOss,
		CurrApp
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'

		setTimeout(()=>{
			/*获取导航列表*/
			this.getNavList()
			/*取出分类列表*/
			this.getContentCategoryList()
		}, 500)
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getNav(this.$route.query.id)
		}
	},
	methods: {
		/*获取导航列表*/
		getNavList: function(){
			if(this.$api.navList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.navList, {
					appid: this.appid,
					lang: this.currlang
				}).then(res => {
					// console.log(res.data.data.list);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							Object.keys(res.data.data).forEach((k) => {
								let indent = '';
								for(var i=1; i<res.data.data[k].level; i++){
									if(i == 1){
										indent += '|---';
									}else{
										indent += '---';
									}
								}
								this.navList.push ({
									id: res.data.data[k].navid,
									name: indent + res.data.data[k].name
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				}) 
			}else{
				this.$message({
					showClose: true,
					message: '您没有获取导航列表权限',
					type: 'error'
				});
			}
		},
		/*获取栏目*/
		getContentCategoryList: function(){
			if(this.$api.contentCategoryList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.contentCategoryList, {
					appid: this.appid,
					lang: this.currlang
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.categoryList = []
							Object.keys(res.data.data).forEach((k) => {
								let indent = '';
								for(var i=1; i<res.data.data[k].level; i++){
									if(i == 1){
										indent += '|---';
									}else{
										indent += '---';
									}
								}
								this.categoryList.push ({
									catid: res.data.data[k].catid,
									name: indent + res.data.data[k].name,
									alias: res.data.data[k].alias
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}else{
				this.$message({
					showClose: true,
					message: '您没有获取栏目列表权限',
					type: 'error'
				});
			}
		},
		/*取出需要修改的数据*/
		getNav: function(){
			if(this.$api.modifyNav != undefined){			
				this.header.title = '编辑导航'
				/*取出需要修改的数据*/
				this.navForm.submitLock = true;
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.modifyNav, {
					appid: this.appid,
					'id': this.$route.query.id
				}).then(res => {
					if(res.data.code == 0){
						// console.log(res.data.data)
						this.navForm.nav.id = res.data.data.navid
						this.navForm.nav.name = res.data.data.name
						this.navForm.nav.icon = res.data.data.icon
						this.navForm.nav.parentid = res.data.data.parentid
						this.navForm.nav.preview = changeUploadFormatBack(res.data.data.preview)
						this.navForm.nav.outside = changeToBool(res.data.data.outside)
						this.navForm.nav.catid = res.data.data.catid
						this.navForm.nav.url_target = res.data.data.url_target
						this.navForm.nav.url = res.data.data.url
						this.navForm.nav.args = (res.data.data.args != '')?res.data.data.args:[]
						this.navForm.nav.child_route = changeToBool(res.data.data.child_route)
						this.navForm.nav.display = changeToBool(res.data.data.display)
						this.navForm.vueRouter.path = (res.data.data.vueRouter != null)?res.data.data.vueRouter.path:''
						this.navForm.vueRouter.name = (res.data.data.vueRouter != null)?res.data.data.vueRouter.name:''
						this.navForm.vueRouter.component = (res.data.data.vueRouter != null)?res.data.data.vueRouter.component:''
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.navForm.submitLock = false;
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.navForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.navForm.nav)
						// return
						this.navForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addNav//默认是添加
						if(this.navForm.nav.id > 0){//修改
							apiUrl = this.$api.modifyNav
						}

						if(apiUrl != undefined){
							/*添加导航*/
							this.$baseURL(this.$domain.cms)

							this.navForm.nav.lang = this.currlang

							let data = JSON.parse(JSON.stringify(this.navForm.nav))
							// for(let i=0; i<data.preview.length; i++){
							// 	data.preview[i].url = '/' + data.preview[i].url
							// }

							this.$post(apiUrl, {
								appid: this.appid,
								Nav: data,
								VueRouter: this.navForm.vueRouter
							}).then(res => {
								// console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
									if(this.navForm.nav.id > 0){
										this.$router.go(-1)	
									}else{
										this.$refs[formName].resetFields();
									}
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.navForm.submitLock = false;
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		inputComponent(){
			if(this.navForm.vueRouter.component){
				this.navForm.vueRouter.path = '/' + this.navForm.vueRouter.component
			}else{
				this.navForm.vueRouter.path = ''
			}
			this.navForm.vueRouter.name = this.navForm.vueRouter.component
		},
		/*是否外链*/
		chooseOutside(val) {
			this.navForm.nav.catid = '';
			this.navForm.nav.url = '';
		},
		/*选择栏目*/
		chooseCategory: function(val){
			const rule = this.categoryList.find(item => item.catid === val);
			this.navForm.nav.url = rule.alias;
		},
		/*插入上传的图片*/
		// insertPic(list, field){
		// 	for(let i=0; i<list.length; i++){
		// 		this.navForm.nav[field].push(
		// 			{
		// 				name: '',
		// 				url:  list[i].url
		// 			}
		// 		)
		// 	}
		// },
		/*删除上传的图片*/
		// delPic(index, field){
		// 	this.navForm.nav[field].splice(index, 1)
		// },
		/*插入上传的文件*/
		insertFile(file){
			// console.log(file instanceof Array)
			if(file instanceof Array){//如果是数组的话，说明是图片
				for(let i=0; i<file.length; i++){
					this.navForm.nav.preview.push(
						{
							name: '',
							url:  file[i].url
						}
					)
				}
			}else{//单个文件路径

			}
		},
		/*删除上传的文件*/
		delFile(index){
			if(index >= 0){//图片
				this.navForm.nav.preview.splice(index, 1)
			}else{//文件路径

			}
		},
		/*增加参数*/
		addArgs(){
			if(this.navForm.nav.args.length < 5){
				this.navForm.nav.args.push('')
			}else{
				this.$message({
					showClose: true,
					message: '最多增加5个参数',
					type: 'error'
				});
			}
		},
		/*删除参数*/
		delArgs(index){
			this.navForm.nav.args.splice(index, 1)
		}
	},
    computed: {
    	...mapGetters([
			'allMenuList'
		]),
    	/*验证导航列表是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkParentId: {
			get: function () {
				if(this.navList.length > 0){
					return this.navForm.nav.parentid
				}else{
					return ''
				}
			},
			set: function (val) {
				this.navForm.nav.parentid = val
			}
		},
		/*验证 指定栏目列表 是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkCat: {
			get: function () {
				if(this.categoryList.length > 0){
					return this.navForm.nav.catid
				}else{
					return ''
				}
			},
			set: function (val) {
				this.navForm.nav.catid = val
			}
		},
    }
};
</script>

<style lang="stylus" scoped>
.nav
	form
		margin-top: 10px
		.line
			text-align: center
		.mtop5
			margin-top: 5px
</style>